<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>教务员-查看学生实习信息</title>
    <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/css/index.css">
</head>
<body>
<div class="body-head"><span>学生实习信息管理&nbsp;>&nbsp;数据分析</span></div>
<div class="main">
    <div class="demoTable">
        <label class="layui-form-label">查询年份：</label>
        <div class="layui-inline">
            <input class="layui-input" type="text" id="yearSelector">
        </div>
        <button class="layui-btn layui-btn-sm" data-type="reload" id="year-btn">确认</button>
    </div>
    <div class="layui-row">
        <div id="demo1" class="layui-col-md6 layui-border-black" style="height: 44%">

        </div>
        <div id="demo2" class="layui-col-md6 layui-border-black" style="height: 44%">

        </div>
    </div>
    <div class="layui-row">
        <div id="demo3" class="layui-col-md6 layui-border-black" style="height: 44%">

        </div>
        <div id="demo4" class="layui-col-md6 layui-border-black" style="height: 44%">

        </div>
    </div>
</div>
<script src="${ctx}/static/js/jquery.min.js"></script>
<script src="${ctx}/static/layui/layui.js" charset="utf-8"></script>
<script src="${ctx}/static/js/echarts.min.js"></script>
<script src="${ctx}/static/js/index.js"></script>
<script>
    layui.use(['jquery', 'layer', 'laydate'],function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let laydate = layui.laydate;

        //时间选择器
        laydate.render({
            elem: '#yearSelector',
            type: 'year'
        });

        let date = new Date();
        let year = date.getFullYear();

        let e1 = echarts.init(document.getElementById("demo1"));
        let e2 = echarts.init(document.getElementById("demo2"));
        let e3 = echarts.init(document.getElementById("demo3"));
        let e4 = echarts.init(document.getElementById("demo4"));

        function myAjax(year) {
            $.ajax({
                type: "get",
                url: "${ctx}/academic/getDevelopmentLanguageData.action",
                dataType: "json",
                data:{year:year},
                success: function (obj) {
                    //console.log(obj);
                    let data = obj.data;
                    let option1 = {
                        title:  {
                            left: 'center',
                            text: year-2+'年-'+year+'年开发语言统计'
                        },
                        toolbox:{
                            feature:{
                                saveAsImage:{}
                            }
                        },
                        tooltip: {},
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data:['Java','Python','PHP','JavaScript','C','其他']
                        },
                        xAxis:{
                            data:[year-2,year-1,year]
                        },
                        yAxis:{},
                        grid:{
                            left:'20%' // 与容器左侧的距离
                        },
                        series:[
                            {
                                name: 'Java',
                                type: 'bar',
                                barGap: 0,
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [data.yearBeforeLast.java, data.lastYear.java, data.thisYear.java]
                            },
                            {
                                name: 'Python',
                                type: 'bar',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [data.yearBeforeLast.python, data.lastYear.python, data.thisYear.python]
                            },
                            {
                                name: 'PHP',
                                type: 'bar',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [data.yearBeforeLast.php, data.lastYear.php, data.thisYear.php]
                            },
                            {
                                name: 'JavaScript',
                                type: 'bar',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [data.yearBeforeLast.javaScript, data.lastYear.javaScript, data.thisYear.javaScript]
                            },
                            {
                                name: 'C',
                                type: 'bar',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [data.yearBeforeLast.c, data.lastYear.c, data.thisYear.c]
                            },
                            {
                                name: '其他',
                                type: 'bar',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [data.yearBeforeLast.other, data.lastYear.other, data.thisYear.other]
                            }
                        ]
                    };

                    //使用刚指定的配置项和数据显示图表
                    e1.setOption(option1);
                },
                error: function () {
                    layer.msg("请求失败");
                }
            });

            $.ajax({
                type: "get",
                url: "${ctx}/academic/getDataBaseData.action",
                dataType: "json",
                data:{year:year},
                success: function (obj) {
                    //console.log(obj);
                    let data = obj.data;
                    let option2 = {
                        title:  {
                            text: year-2+'年-'+year+'年数据库统计',
                            left: 'center'
                        },
                        toolbox:{
                            feature:{
                                saveAsImage:{}
                            }
                        },
                        tooltip: {},
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data:['MySQL','Oracle','SQL Server','DB2','PostgreSQL','其他']
                        },
                        xAxis:{
                            data:[year-2,year-1,year]
                        },
                        yAxis:{},
                        grid:{
                            left:'20%' // 与容器左侧的距离
                        },
                        series:[
                            {
                                name: 'MySQL',
                                type: 'bar',
                                barGap: 0,
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [data.yearBeforeLastDataBase.mysql, data.lastYearDataBase.mysql, data.thisYearDataBase.mysql]
                            },
                            {
                                name: 'Oracle',
                                type: 'bar',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [data.yearBeforeLastDataBase.oracle, data.lastYearDataBase.oracle, data.thisYearDataBase.oracle]
                            },
                            {
                                name: 'SQL Server',
                                type: 'bar',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [data.yearBeforeLastDataBase.sqlServer, data.lastYearDataBase.sqlServer, data.thisYearDataBase.sqlServer]
                            },
                            {
                                name: 'DB2',
                                type: 'bar',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [data.yearBeforeLastDataBase.db2, data.lastYearDataBase.db2, data.thisYearDataBase.db2]
                            },
                            {
                                name: 'PostgreSQL',
                                type: 'bar',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [data.yearBeforeLastDataBase.postgreSQL, data.lastYearDataBase.postgreSQL, data.thisYearDataBase.postgreSQL]
                            },
                            {
                                name: '其他',
                                type: 'bar',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [data.yearBeforeLastDataBase.other, data.lastYearDataBase.other, data.thisYearDataBase.other]
                            }
                        ]
                    };

                    //使用刚指定的配置项和数据显示图表
                    e2.setOption(option2);
                },
                error: function () {
                    layer.msg("请求失败");
                }
            });

            $.ajax({
                type: "get",
                url: "${ctx}/academic/getSalaryData.action",
                dataType: "json",
                data:{year:year},
                success: function (obj) {
                    console.log(obj);
                    let data = obj.data;
                    let option3 = {
                        title:  {
                            text: year+'年实习工资统计',
                            left: 'center'
                        },
                        toolbox:{
                            feature:{
                                saveAsImage:{}
                            }
                        },
                        tooltip: {},
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                            //data:['3K以下','3K-4K','4K-5K','5K-6K','6K以上']
                        },
                        series:[
                            {
                                name: '工资',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    { value: data.thisYearSalary.lt3000, name: '3K以下' },
                                    { value: data.thisYearSalary.threeToFour, name: '3K-4K' },
                                    { value: data.thisYearSalary.fourToFive, name: '4K-5K' },
                                    { value: data.thisYearSalary.fiveToSix, name: '5K-6K' },
                                    { value: data.thisYearSalary.gt6000, name: '6K以上' }
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: '{b}:{c}({d}%)'
                                    }
                                }
                            }
                        ]
                    };

                    //使用刚指定的配置项和数据显示图表
                    e3.setOption(option3);
                },
                error: function () {
                    layer.msg("请求失败");
                }
            });

            $.ajax({
                type: "get",
                url: "${ctx}/academic/getInternshipRateData.action",
                dataType: "json",
                data:{year:year},
                success: function (obj) {
                    console.log(obj);
                    let data = obj.data;
                    let option4 = {
                        title:  {
                            text: year+'年实习人数统计',
                            left: 'center'
                        },
                        toolbox:{
                            feature:{
                                saveAsImage:{}
                            }
                        },
                        tooltip: {},
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                            //data:['3K以下','3K-4K','4K-5K','5K-6K','6K以上']
                        },
                        series:[
                            {
                                name: '人数',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    { value: data.yearCount, name: '已实习人数' },
                                    { value: data.noYearCount, name: '未实习人数' },
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: '{b}:{c}({d}%)'
                                    }
                                }
                            }
                        ]
                    };

                    //使用刚指定的配置项和数据显示图表
                    e4.setOption(option4);
                },
                error: function () {
                    layer.msg("请求失败");
                }
            });
        }

        myAjax(year);

        $("#year-btn").on("click",function () {
            year=$("#yearSelector").val();
            if (year == "") {
                layer.msg("请输入年份");
            }else {
                myAjax(year);
            }
        });

    })
</script>
</body>
</html>
